<template>
  <div>
    <el-select
      v-if="showInput"
      :value="value"
      multiple
      filterable
      remote
      reserve-keyword
      :popper-append-to-body="false"
      clearable
      :disabled="disabled"
      @focus="open"
      @remove-tag="removeTag"
      @clear="onClear"
    >
      <el-option v-for="item in cacheList" :key="item.id" :label="item.nickName" :value="item.id"> </el-option>
    </el-select>
    <el-dialog title="选择授权用户" :visible.sync="show" width="1200px" @closed="clear">
      <div v-if="showComp" class="content-wrap">
        <el-row style="height: 100%">
          <el-col :span="4" style="height: 100%; border-right: 1px solid #eee">
            <Left :params.sync="params" @add="addSelect"></Left>
          </el-col>
          <el-col :span="16" style="height: 100%">
            <CustCenter ref="center" :select-list.sync="selectList" :params="params"></CustCenter>
          </el-col>
          <el-col :span="4" style="height: 100%; border-left: 1px solid #eee">
            <Right :select-list.sync="selectList" @change="onChange"></Right>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Left from './components/left.vue'
import Right from './components/right.vue'
import CustCenter from './components/center.vue'
import { requestUserNames } from '@/api/system/user'
export default {
  components: {
    Left,
    Right,
    CustCenter,
  },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    showInput: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    clearOnOpen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
      selectList: [],
      params: {},
      showComp: false,
      cacheList: [],
    }
  },
  watch: {
    value: {
      handler: function (newval) {
        if (
          this.value.length &&
          (!this.cacheList.length ||
            this.value.length !== this.cacheList.length ||
            this.value.length !== this.cacheList.filter((item) => this.value.includes(item.id)).length)
        ) {
          requestUserNames(newval).then((res) => {
            this.cacheList = res.data.map((item) => {
              return { ...item, id: item.userId }
            })
            this.selectList = JSON.parse(JSON.stringify(this.cacheList))
          })
        } else if (!this.value.length) {
          this.cacheList = []
          this.selectList = []
        }
      },
      immediate: true,
    },
  },
  methods: {
    open() {
      // if (this.showInput) {
      //   if (this.value.length&&this.value.length === this.cacheList.filter(item=>this.value.includes(item.id)).length) {
      //     this.selectList = JSON.parse(JSON.stringify(this.cacheList))
      //   }
      // }
      if (this.clearOnOpen) {
        this.selectList = []
        this.cacheList = []
      } else {
        this.selectList = JSON.parse(JSON.stringify(this.cacheList))
      }
      this.showComp = true
      this.show = true
    },
    close() {
      this.show = false
    },
    confirm() {
      this.cacheList = JSON.parse(JSON.stringify(this.selectList))
      this.$emit(
        'change',
        this.cacheList.map((item) => item.id)
      )
      this.$emit(
        'input',
        this.cacheList.map((item) => item.id)
      )
      this.$emit('changeOrginData', this.cacheList)
      this.close()
    },
    clear() {
      this.showComp = false
      this.selectList = []
      this.params = {}
    },
    onChange(val) {
      console.log(val)
      this.selectList = val
      this.$nextTick(() => {
        this.$refs.center.setSellection()
      })
    },
    addSelect(list) {
      let result = [...list, ...this.selectList].map((item) => JSON.stringify(item))
      this.selectList = Array.from(new Set(result)).map((item) => JSON.parse(item))
      setTimeout(() => {
        this.$refs.center.setSellection()
      }, 100)
    },
    removeTag(e) {
      let index = this.cacheList.findIndex((item) => item.id === e)
      if (index > -1) {
        this.cacheList.splice(index, 1)
        this.$emit(
          'change',
          this.cacheList.map((item) => item.id)
        )
        this.$emit(
          'input',
          this.cacheList.map((item) => item.id)
        )
      }
    },
    onClear() {
      this.cacheList = []
      this.selectList = []
      this.$emit('change', [])
      this.$emit('input', [])
    },
  },
}
</script>
<style lang="scss" scoped>
.content-wrap {
  height: 500px;
}

::v-deep {
  .el-select-dropdown {
    display: none;
  }
}
</style>
